import { Component, OnInit, Input, OnChanges, AfterViewInit } from '@angular/core';
import { DragDrop } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-map-legend',
  templateUrl: './mapbox-map-legend.component.html',
  styleUrls: ['./mapbox-map-legend.component.scss']
})
export class MapLegendComponent implements OnInit, OnChanges, AfterViewInit {
  legendDown = true;
  constructor(private dragDrop: DragDrop) { }
  @Input() data = null;
  ngOnInit() {
  }
  ngAfterViewInit() {
    const dom = document.getElementById('maplegend');
    const dragModal = this.dragDrop.createDrag(dom);
    const title = document.getElementById('legend_bottom');
    // 设置句柄为title，即仅头部可拖动，避免内容中鼠标无法选中的情况
    dragModal.withHandles([title]);
    // 限制拖拽区域在body中，防止溢出
    const domRouter = document.getElementById('contentRouter');
    dragModal.withBoundaryElement(domRouter);
  }

  ngOnChanges(): void {
  }
  arrowClick() {
    this.legendDown = !this.legendDown;
  }
}
